<!-- 
在 Vue 3 中，Render 函数是一个重要的概念，它允许开发者以编程的方式创建组件的虚拟 DOM。以下是对 Vue 3 中 Render 函数的说明总结：
  1. Render 函数的基本概念
  - Render 函数是一个 JavaScript 函数，它返回一个虚拟 DOM（VNode）。
  - 它提供了一种更灵活的方式来描述组件的结构，而不是使用模板语法。

  2. 使用 Render 函数
  - Render 函数通常在组件的  `setup`  函数中定义，也可以直接在组件选项中定义。
  - 在 Render 函数中，可以使用  `h`  函数（即  `createElement` ）来创建 VNode。
  示例：
  import { defineComponent, h } from 'vue';

  export default defineComponent({
    setup() {
      return () => {
        return h('div', { class: 'my-class' }, 'Hello, Vue 3 with Render Function!');
      };
    }
  });
  3. Render 函数的参数
  Render 函数通常接收三个参数：
  - createElement：用于创建 VNode 的函数，通常命名为  `h` 。
  - context：包含组件的上下文信息，如属性、插槽、事件等。
  - children：可以是子节点，可以是字符串、数组或 VNode。

  4. 使用插槽和属性
  在 Render 函数中，可以轻松地使用插槽和属性：

  示例：
  import { defineComponent, h } from 'vue';

  export default defineComponent({
    render() {
      return h('div', { class: 'container' }, [
        h('h1', 'Hello, World!'),
        this.$slots.default ? this.$slots.default() : null
      ]);
    }
  });
  5. 优势
  - 灵活性：Render 函数提供了更大的灵活性，可以根据条件动态生成 VNode。
  - 逻辑复用：可以在 Render 函数中使用 JavaScript 逻辑，使得组件的渲染过程更加动态。
  - 更好的 TypeScript 支持：对于 TypeScript 用户，使用 Render 函数可以获得更好的类型推导支持。

  6. 适用场景
  - 当需要动态生成复杂的 UI 结构时，Render 函数非常有用。
  - 在需要使用较多 JavaScript 逻辑来控制组件渲染时，Render 函数可以使代码更清晰。
  总结
  Render 函数在 Vue 3 中提供了一种强大的方式来创建虚拟 DOM，允许开发者以编程的方式构建组件。通过使用 Render 函数，开发者可以获得更高的灵活性和可控性，适用于需要复杂逻辑和动态渲染的场景。 
-->
<template>
  <div class="app">
    <h3>1. options API实现: render函数的使用</h3>
    <RenderCpns></RenderCpns>

    <h3>2. composition API实现: render函数的使用</h3>
    <render></render>
  </div>
</template>

<script setup>
  import { ref, h } from "vue";
  import Home from "./Home.vue";
  import RenderCpns from "./Render.vue";

  const counter = ref(0);

  const increment = () => {
    counter.value++;
  };
  const decrement = () => {
    counter.value--;
  };

  const render = () =>
    h("div", { className: "app" }, [
      h("h2", null, `当前计数: ${counter.value}`),
      h("button", { onClick: increment }, "+1"),
      h("button", { onClick: decrement }, "-1"),
      h(Home),
    ]);
</script>

<style lang="scss" scoped></style>
